<template>
  <div :class="`bg-${color}-50 border border-${color}-200 rounded-lg p-5`">
    <i :class="`fa ${icon} text-3xl text-${color}-500 mb-3`"></i>
    <h3 class="font-semibold text-lg mb-2">{{ title }}</h3>
    <p class="text-gray-600">{{ text }}</p>
  </div>
</template>

<script>
export default {
  props: {
    icon: String,
    title: String,
    text: String,
    color: {
      type: String,
      default: 'blue'
    }
  }
}
</script>